<!--
 * @Author: ”bao_xu_hui “13474815223”
 * @Date: 2022-09-01 15:47:00
 * @LastEditors: ‘wanghd-b’ wanghd-b@glodon.com
 * @LastEditTime: 2024-11-26 09:16:14
 * @FilePath: \green-build-system-web\src\components\HlPublic\transfer\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!--  -->
  <el-dialog
    :title="multiple?'选择人员':'选择人员('+checkTransferListLeft.length+')'"
    :visible.sync="dialogVisibleBool"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modal-append-to-body="false"
    custom-class="dialogForm "
    :append-to-body="true" :lock-scroll="false"
    :width="multiple?'50%':'25%'"
  >
    <el-row class="height-100">
      <el-col :span="10" class="transferItemBox transferItemBoxLeft " :style="{'width':!multiple?'100%':''}" :class="!multiple?'transferItemBoxLeftNoL':''">
        <div class="transferTitle p-px-10">
          <div class="transferTitleInput">
            <el-form ref="queryParamsLeft" class="bao_searchBox" :model="queryParamsLeft" size="small">
              <el-form-item label="" prop="deptId" class="m-px-b-0">
                <treeselect v-model.trim="queryParamsLeft.deptId" :options="deptOptions"
                            placeholder="请选择上级部门" no-options-text="暂无数据"
                            noResultsText="未搜索到内容" noChildrenText="暂无下级分类"
                            @input="treeInputFun"
                />
              </el-form-item>
              <!-- <el-form-item label="" prop="nickName" class="m-px-b-0">
                <el-input
                  v-model="queryParamsLeft.nickName"
                  placeholder="请输入"
                  clearable
                  prefix-icon="el-icon-search"
                  @input="handleQueryLeft"
                  @clear="resetQueryLeft('queryParamsLeft')"
                />
              </el-form-item> -->
            </el-form>
          </div>
          <span v-if="multiple" class="transferTitleSpan p-px-t-10">未选择 ({{ checkTransferListLeft.length }}条) </span>

          <div style="clear:both"></div>
        </div>
        <div class="transferCon p-px-10">
          <div v-if="multiple">
            <el-checkbox v-model="checkAllLeft" :indeterminate="isIndeterminateLeft" @change="(value)=>handleCheckAllChange(value,'Left')">全选</el-checkbox>
            <el-checkbox-group v-model="checkSelectableLeft" @change="(value)=>handleCheckedCitiesChange(value,'Left')">
              <el-checkbox v-for="(item,index) in checkTransferListLeft" :key="index" :label="item.userId">{{ item.nickName }}</el-checkbox>
            </el-checkbox-group>
          </div>
          <div v-else>
            <el-radio-group v-model="radioLeft">
              <el-radio v-for="(item,index) in checkTransferListLeft" :key="index" :label="item.userId">{{ item.nickName }}</el-radio>
            </el-radio-group>
          </div>
        </div>
      </el-col>
      <el-col v-if="multiple" :span="2" class="transferBtn">
        <div class="transferBtnBo">
          <el-button icon="el-icon-arrow-left" size="small" :class="checkTransferListRight.length>0?'active':''" @click="checkTransferListRight.length>0 ? clickList('Right'):''"></el-button>
          <el-button style="margin-left: 0;display: block;margin-top: 10px;" icon="el-icon-arrow-right" size="small" :class="checkTransferListLeft.length>0?'active':''" @click="checkTransferListLeft.length>0 ? clickList('Left'):''"></el-button>
        </div>
      </el-col>
      <el-col v-if="multiple" :span="10" class="transferItemBox transferItemBoxRight  floatRight ">
        <div class="transferTitle p-px-10">
          <span class="transferTitleSpan">已选择 ({{ checkTransferListRight.length }}条) </span>
        </div>
        <div class="transferCon p-px-10">
          <div v-if="multiple">
            <el-checkbox v-model="checkAllRight" :indeterminate="isIndeterminateRight" @change="(value)=>handleCheckAllChange(value,'Right')">全选</el-checkbox>
            <el-checkbox-group v-model="checkSelectableRight" @change="(value)=>handleCheckedCitiesChange(value,'Right')">
              <el-checkbox v-for="(item,index) in checkTransferListRight" :key="index" :disabled="item.userId == user.userInfo.userId" :label="item.userId">{{ item.nickName }}</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" size="small" @click="onSubmit()">确 定</el-button>
      <el-button size="small" @click="resetSubmit">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import resizeViewConfig from '@/utils/commonUtils/resizeViewConfig'// 全局更改大小
import { methodGetApi } from '@/api/publicApi'
import { commonMixins } from '@/mixins/publicMixins/commonMixins'
export default {
  components: { Treeselect },
  mixins: [commonMixins],
  data() {
    return {
      // 能否多选
      multiple: true,
      // 是否显示弹出层
      dialogVisibleBool: false,
      // 多选-----------------start------------------------------
      isIndeterminateLeft: true, // 左侧样式
      queryParamsLeft: {

      }, // 左侧筛选条件
      checkAllLeft: false, // 左侧全选
      checkSelectableLeft: [], // 左侧选中的数组
      checkTransferListLeft: [], // 左侧全部数据
      isIndeterminateRight: true, // 右侧样式
      checkAllRight: false, //  右侧全选
      checkSelectableRight: [], //  右侧选中的数组
      checkTransferListRight: [], //  右侧全部数据
      // 单选-----------------start------------------------------
      radioLeft: null
    }
  },

  updated() {
    resizeViewConfig()
    this.transferItemBoxFun()
  },
  mounted() {
    window.addEventListener('resize', ()=> {
      resizeViewConfig()
      this.transferItemBoxFun()
    })
  },
  computed: {
    user() {
      return this.$store.state.user
    }
  },
  methods: {

    /**
     * @description:  树形change
     * @Author: baoxuhui
     * @return {*}
     */
    treeInputFun(val, ins) {
      if (!this.multiple) {
        this.$set(this, 'radioLeft', null)
      }
      this.getListLeftFun()
    },
    /**
     * @description: 部门
     * @Author: baoxuhui
     * @return {*}
     */
    deptTreeselect() {
      this.getOptionsMixins('deptOptions', '/system/dept/treeselect')
    },
    // /** 转换部门数据结构 */
    // normalizer(node) {
    //   if (node.children && !node.children.length) {
    //     delete node.children
    //   }
    //   return {
    //     id: node.id,
    //     label: node.label,
    //     children: node.children
    //   }
    // },
    /**
     * @description: // 高度计算
     * @Author: baoxuhui
     * @param {*} type//从左侧还是右侧穿梭Left:左导右，Right:右到左
     * @return {*}
     */
    transferItemBoxFun() {
      console.log(this.multiple)
      if (this.multiple) {
        const transferItemBoxLeft = document.documentElement.getElementsByClassName('transferItemBoxLeft')[0]
        const transferItemBoxRight = document.documentElement.getElementsByClassName('transferItemBoxRight')[0]
        const transferItemBoxLeftH = transferItemBoxLeft ? transferItemBoxLeft.clientHeight : 0
        const transferItemBoxRightH = transferItemBoxRight ? transferItemBoxRight.clientHeight : 0
        if (transferItemBoxRightH >= transferItemBoxLeftH) {
          if (document.documentElement.getElementsByClassName('transferItemBoxLeft')[0]) {
            document.documentElement.getElementsByClassName('transferItemBoxLeft')[0].style.height = transferItemBoxRightH + 'px'
          }
        } else {
          if (document.documentElement.getElementsByClassName('transferItemBoxRight')[0]) {
            document.documentElement.getElementsByClassName('transferItemBoxRight')[0].style.height = transferItemBoxLeftH + 'px'
          }
        }
      } else {
        document.documentElement.getElementsByClassName('transferItemBoxLeft')[0].style.height = '400px'
      }
    },
    /**
     * @description: // 穿梭事件
     * @Author: baoxuhui
     * @param {*} type//从左侧还是右侧穿梭Left:左导右，Right:右到左
     * @return {*}
     */
    clickList(type) {
      const newType = type === 'Left' ? 'Right' : 'Left'
      if (this['checkSelectable' + type].length === 0) {
        return this.msgAlt('请选择数据','error')
      } else {
        this['checkSelectable' + type].forEach((element) => {
          this['checkTransferList' + type].forEach((ele, index) => {
            if (element === ele.userId) {
              this['checkTransferList' + newType].push(ele)// 给右侧复制
              this['checkTransferList' + type].splice(index, 1)
            }
          })
        })
      }
      this['checkSelectable' + type] = []
      this.isIndeterminateLeft = false
      this.isIndeterminateRight = false
      this.checkAllLeft = false
      this.checkAllRight = false
      // if (this['checkTransferList' + type].length === 0) {
      //   this['checkAll' + type] = false
      // }
    },
    /**
     * @description: 全选事件
     * @Author: baoxuhui
     * @param {*} val//值
     * @param {*} type//在左侧操作还是右侧操作Left:左，Right:右
     * @return {*}
     */
    handleCheckAllChange(val, type) {
      // console.log(this['checkTransferList' + type])
      // console.log(this.user.userInfo.userId)
      if (val) {
        this['checkTransferList' + type].forEach(element => {
          if (element.userId !== this.user.userInfo.userId) {
            this['checkSelectable' + type].push(element.userId)
          }
        })
      } else {
        this['checkSelectable' + type] = []
      }
      this['isIndeterminate' + type] = false
    },
    /**
     * @description: 选中事件
     * @Author: baoxuhui
     * @param {*} val//值
     * @param {*} type//在左侧操作还是右侧操作Left:左，Right:右
     * @return {*}
     */
    handleCheckedCitiesChange(val, type) {
      const checkedCount = val.length
      this['checkAll' + type] = checkedCount === this['checkTransferList' + type].length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this['checkTransferList' + type].length
    },
    /**
     * @description: 左侧数据渲染
     * @Author: baoxuhui
     * @return {*}
     */
    getListLeftFun() {
      // console.log(this.queryParamsLeft)
      // Object.assign(this.queryParamsLeft, queryParams)
      const url = '/system/user/getProjectListByCondition'
      methodGetApi(url, this.queryParamsLeft).then(res => {
        const data = res.rows
        if (this.checkTransferListRight.length > 0) {
          this.checkTransferListRight.forEach(element => {
            data.forEach((ele, index) => {
              if (element.userId === ele.userId) {
                data.splice(index, 1)
              }
            })
          })
        }
        this.checkTransferListLeft = data
        this.loadingLeft = false
      })
    },

    handleQueryLeft() {
      this.getListLeftFun()
    },
    resetQueryLeft(formName) {
      this[formName] = {
        nickName: null
      }
      this.$refs[formName].resetFields()
      this.getListLeftFun()
    },

    onSubmit() {
      // console.log(this.multiple)
      // console.log(this.checkTransferListRight)
      // console.log(this.radioLeft)
      if (this.multiple) {
        if (this.checkTransferListRight.length > 0) {
          this.$emit('formArryDetail', this.checkTransferListRight)
        } else {
          return this.msgAlt('请选择人员放置右侧','error')
        }
      } else {
        if (this.sentencedEmpty(this.radioLeft)) {
          const arry = []
          this['checkTransferListLeft'].forEach((element) => {
            // console.log(element)
            // console.log(element.userId)
            if (this.radioLeft === element.userId) {
              arry.push(element)
              this.$emit('formArryDetail', arry)
            }
          })
        } else {
          return this.msgAlt('请选择人员','error')
        }
      }
    },
    resetSubmit() {
      this.dialogVisibleBool = false
      this.isIndeterminateLeft = true // 左侧样式
      this.queryParamsLeft = {
        userType: '00',
        deptId: undefined
      }// 左侧筛选条件
      this.checkAllLeft = false// 左侧全选
      this.checkSelectableLeft = []// 左侧选中的数组
      this.checkTransferListLeft = []// 左侧全部数据
      this.isIndeterminateRight = true// 右侧样式
      this.checkAllRight = false//  右侧全选
      this.checkSelectableRight = []//  右侧选中的数组
      this.checkTransferListRight = [] //  右侧全部数据
      this.radioLeft = null
    }

  }
}
</script>
<style lang="scss">
@import "~@/assets/styles/publicStyles/Hlstyle.scss";
@import "~@/assets/styles/publicStyles/mixin.scss";
//.contentBox{
//  height: 100%;
//}
.transferBtn{
    position: absolute;
    top: 46%;
    left: calc( 50% - 16px);
    .el-button{
      padding: 0 10px;
    }
  .bao_elIconCaret{
    font-size: 36px;
    color: #ccc;
  }
  .active{
    color: #2b68cb;
    border: 1px solid #1072b7;
  }
}
.transferItemBox{
  border: 1px solid #ddd;
  border-radius: 5px;
  width: calc(50% - 40px);
  min-height: 35rem;
  // overflow-x: hidden;
  .el-pagination__jump{
    margin-right: 20px;
  }
  .el-checkbox,.el-radio{
    display: block;
  }
}
.transferTitle{
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    font-size: 1.4rem;
    .transferTitleSpan{
      display: block;
    }

}

.transferCon{
  height: calc(100% - 2rem - #{$input-inner-height} - #{$primary-fontSize } - 3.4rem);
  overflow-x: hidden;
  @include mixinScrollBar($primary-mian-bg);
}
.transferItemBoxLeftNoL{
  .transferCon{
    height: calc(100% - 2rem - #{$input-inner-height} - 1.4rem);
  }
}
.transferItemBoxRight{
  .transferCon{
    height: calc(100% - #{$input-inner-height} - #{$primary-fontSize });
  }
}

</style>
